/**
* Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
* Copyright (C) 2017-2018 THL A29 Limited, a Tencent company. All rights reserved.
* Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
* http://opensource.org/licenses/MIT
* Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
*/
/* common start */
html, body{
	padding: 0;
	margin: 0;
	font-family: "微软雅黑","\xe8\x93\x9d\xe9\xb2\xb8\xe6\x99\xba\xe8\x90\xa5";
	font-size: 16px;
	color: #505862;
	min-width: 1200px;
	height: 100%;
}
a img {
	vertical-align:middle;
	}
a{
	text-decoration: none;
	color: #505862;
}
p{
	padding: 0;
	margin: 0;
}
ul, li{
	list-style: none;
	padding: 0;
	margin: 0;
}
.cl:after{
	content: "";
	clear: both;
	display: block;
}
/* common end */
/* 导航 start */
.navbar{
	height: 72px;
	background: #313b4c;
	position: relative;
}
.logo{
	padding: 19px 0 0 24px;
	position: absolute;
}
.nav-list{
	height: 72px;
}
.nav-list li{
	float: left;
	position: relative;
	left: 50%;
	top: 50%;
	transform: translate(-100%, -50%);
	-o-transform: translate(-100%, -50%);
	-ms-transform: translate(-100%, -50%);
	-moz-transform: translate(-100%, -50%);
	-webkit-transform: translate(-100%, -50%);
	text-align: center;
	padding: 0 20px;
	height: 72px;
}
.nav-list a{
	color: #bfcbd7;
	outline: none
}
.nav-list p{
	height: 72px;
	line-height: 72px;
}
.nav-list .active a{
	color: #fff;
}

.nav-list .active .line{
	display: inline-block;
	width: 30px;
	height: 4px;
	background: #fff;
	position: relative;
	top: -17px;
}
.userInfo{
	position: absolute;
	right: 20px;
	top: 50%;
	color: #fff;
	margin-top: -19px;
	height: 45px;
	padding-right: 20px;
}
.userInfo:hover .dropdown{
	display: block;
}
.userImg{
	vertical-align: middle;
	width: 36px;
	height: 36px;
	display: inline-block;
	border: 1px solid #575f6d;
	border-radius: 50%;
	position: relative;
}
.userImg img{
	border-radius: 50%;
}
.avatar{
	margin: 2px;
	width: 32px;
	height: 32px;
}
.crown{
	position: absolute;
	width: 12px;
	height: 11px;
	display: inline-block;
	background: url(../images/crown.png);
	top: -5px;
	left: 23px;
}
.caret{
	width: 0;
	height: 0;
	border: 5px solid transparent;
	border-top: 5px solid #fff;
	display: inline-block;
	position: absolute;
	top: 16px;
	right: 4px;
}
.dropdown{
	position: absolute;
	right: -2px;
	background: #fff;
	border: 1px solid #e5e5e5;
	width: 118px;
	top: 45px;
	font-size: 14px;
	display: none;
}
.dropdown .caret-up{
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-bottom: 6px solid #fff;
	display: inline-block;
	position: absolute;
	top: -12px;
	right: 4px;
}
.dropdown-menu li{
	height: 42px;
	line-height: 42px;
}
.dropdown-menu li:hover{
	background: #f4f6f9;
}
.dropdown-menu li a{
	padding-left: 14px;
	display: inline-block;
	width: 104px;
	height: 42px;
}
.dropdown-menu .icon{
	width: 20px;
	height: 20px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 9px;
}
.icon-userinfo{
	background: url(../images/icon-userinfo.png) no-repeat;
}
.icon-um{
	background: url(../images/icon-um.png) no-repeat;
}
.icon-logout{
	background: url(../images/icon-logout.png) no-repeat;
}
.icon-bind-weixin{
	background: url(../images/icon-bind-weixin.png) no-repeat;
}
.icon-unbind-weixin{
	background: url(../images/icon-unbind-weixin.png) no-repeat;
}
/* 导航 end */
.container{
	width: 1200px;
	margin: 60px auto 0;
	min-height: calc(100% - 232px);
	min-height: -moz-calc(100% - 232px);
	min-height: -webkit-calc(100% - 232px);
}
/* 应用列表 start */
.main-left{
	width: 885px;
	float: left;
}
.left-title{
	margin-bottom: 9px;
}
.left-title p{
	float: left;
}
.conf{
	float: right;
	font-size: 14px;
}
.conf .active{
	display: block;
}
.edit, .comp{
	width: 54px;
	height: 26px;
	line-height: 26px;
	cursor: pointer;
	display: none;
}
.edit .gear{
	width: 15px;
	height: 14px;
	display: inline-block;
	background: url(../images/gear.png);
	position: relative;
	top: 2px;
}
.edit span{
	color: #9a9da2;
}
.comp{
	color: #fff;
	background: #3385f4;
	text-align: center;
}
.app-list{
	width: 100%;
	text-align: center;
	margin-bottom: 20px;
}
.app-list-item{
	float: left;
	border: 1px solid #ebecee;
	width: 218px;
	height: 218px;
	padding: 1px;
	margin:0 0 -1px -1px;
	position: relative;
	z-index: 0;
    overflow: hidden;
}
.mask{
	position: absolute;
	width: 178px;
	/*height: 178px;*/
	height: 0;
	background: #313b4c;
	/*opacity: 0;*/
	color: #fff;
	font-size: 12px;
	padding: 20px;
	text-align: left;
	line-height: 18px;
	left: 1px;
	/*top: 1px;*/
    bottom: -40px;
    text-overflow: ellipsis;
	transition: all .3s;

}
.app-list-item:hover .mask{
    height: auto;
    max-height: 108px;
    bottom: 0;
	opacity: 0.93;
}
.mask-text{
    text-overflow: ellipsis;
    height: auto;
    max-height: 108px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    display: -webkit-box;
}
.app-list-item:hover{
	background: #f4f6f9;
	cursor: pointer;
}
.app-list-item.state-edit{
	border: 1px dashed #999;
}
.app-list-item.state-edit:hover{
	border: 2px dashed #ffc000;
	padding: 0;
	z-index: 1;
}
.app-list-item a{
	display: inline-block;
	width: 100%;
	height: 100%;
	color: #505862;
}
.ui-state-highlight{
	float: left;
	width: 220px;
	height: 220px;
	margin: 0 0 -1px -1px;
	position: relative;
	z-index: 1;
}
.app-list-item .item{
	width: 58px;
	height: 58px;
	display: inline-block;
	margin: 63px 0 20px;
}
.loadMore{
	border: 1px solid #ebecee;
	background: #fcfcfd;
	height: 40px;
	margin: 0 0 50px;
	text-align: center;
	line-height: 40px;
	cursor: pointer;
}
.loading{
	display: none;
}
/* 应用列表 end */
/*常用链接 start*/
.main-right{
	margin-left: 41px;
	float: left;
	width: 274px;
}
.right-title{
	padding-bottom: 15px;
	border-bottom: 1px solid #ced9ee;
}
.list{
	line-height: 43px;
	font-size: 14px;
}
.list a{
	color: #505862;
}
.list a:hover{
	color: #57a3f1;
}
/*常用链接 end*/
/*footer start*/
.footer{
	height: 70px;
	background: #313b4c;
	color: #bfcbd7;
	text-align: center;
	font-size: 12px;
	line-height: 20px;
	padding: 20px 0 30px 0;
}
.footer a{
	color: #bfcbd7;
	margin: 0 5px;
}
.footer a:hover{
	color: #fff;
}
.follow-us{
	position: relative;
}
.follow-us:hover .qr-box{
	display: inline-block;
}
.qr-box{
	display: none;
	position: absolute;
	left: -25px;
	top: -110px;
}
.qr{
	padding: 4px;
	border: 1px solid #e4e4e4;
	background: #fff;
	display: inline-block;
}
.qr-caret{
	width: 0px;
	height: 0px;
	border: 7px solid transparent;
	border-top: 7px solid #fff;
	position: absolute;
	top: 98px;
	left: 42px;
}
.logo-qt{
    margin-bottom: 10px;
}
.logo-qt .img-logo{
    position: relative;
    top: 4px;
    margin-right: 8px;
}
/*footer end*/
a:active,a:hover{outline: none;}
